<template>
  <div>
    <div>
      <el-form :inline="true" :model="form.brandName" class="demo-form-inline">
        <el-form-item label="品牌名">
          <el-input v-model="form.brandName" placeholder="请输入" clearable />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getList">查询</el-button>
          <el-button type="primary" @click="updateBatch">批量删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-button type="success" @click="toAdd">添加品牌</el-button>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="brandId" label="序号" />
      <el-table-column prop="brandName" label="品牌名称" />
      <el-table-column prop="brandUse" label="使用商品数量" />
      <el-table-column prop="brandTop" label="排序" />
      <el-table-column prop="brandStatus" label="状态">
        <template #default="scope">
          <el-switch
            v-model="scope.row.brandStatus"
            size="large"
            active-text="显示"
            inactive-text="隐藏"
            :active-value="0"
            :inactive-value="1"
            @change="updateSwitch(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="warning" @click="toUpdate(scope.row)"
            >编辑</el-button
          >
          <el-button type="danger" @click="toDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="form.pageNum"
        v-model:page-size="form.pageSize"
        :page-sizes="[3, 6, 9, 12]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
  <div>
    <el-dialog v-model="dialogFormSvae" title="添加品牌" width="500">
      <el-form :model="form">
        <el-form-item label="*品牌名称" :label-width="formLabelWidth">
          <el-input v-model="saveForm.brandName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="*排序" :label-width="formLabelWidth">
          <el-input-number v-model="saveForm.brandTop" :min="1" :max="10" />
        </el-form-item>
        <el-form-item label="*状态" :label-width="formLabelWidth">
          <el-radio-group v-model="saveForm.brandStatus">
            <el-radio value="0" size="large">显示</el-radio>
            <el-radio value="1" size="large">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormSvae = false">取消</el-button>
          <el-button type="primary" @click="saveOk"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  <div>
    <el-dialog v-model="dialogFormUpdate" title="品牌信息" width="500">
      <el-form :model="form">
        <el-form-item label="*品牌名称" :label-width="formLabelWidth">
          <el-input v-model="updateForm.brandName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="*排序" :label-width="formLabelWidth">
          <el-input-number v-model="updateForm.brandTop" :min="1" :max="10" />
        </el-form-item>
        <el-form-item label="*状态" :label-width="formLabelWidth">
          <el-radio-group v-model="updateForm.brandStatus">
            <el-radio :value="0" size="large">显示</el-radio>
            <el-radio :value="1" size="large">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormUpdate = false">取消</el-button>
          <el-button type="primary" @click="updateOk"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import {
  getBrandList,
  saveBrand,
  updateBrand,
  deleteBrandById,
  deleteBatchByIds,
} from "../api/api";
import { ElMessage, ElMessageBox } from "element-plus";
const multipleSelection = ref<any>([]);
const dialogFormSvae = ref(false);
const dialogFormUpdate = ref(false);
const formLabelWidth = "140px";
const form = ref({
  brandName: "",
  pageNum: 1,
  pageSize: 2,
});
const saveForm = ref({});
const updateForm = ref({});

var myChart = null;
const tableData = ref([]);
const total = ref(0);

const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val;
};

const checkValue = (row: any) => {
  console.log("值", row.brandStatus);
  console.log("类型", typeof row.brandStatus);
};

const updateBatch = () => {
  if (multipleSelection.value <= 0) {
    ElMessage.error("请先选择数据");
    return;
  }

  console.log("ids", multipleSelection.value);

  ElMessageBox.confirm("删除之后无法恢复，是否确定删除?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      deleteBatchByIds(multipleSelection.value).then((res) => {
        if (res.data.flag) {
          ElMessage.success(
            "成功删除" + multipleSelection.value.length + "条数据"
          );
          getList();
        } else {
          ElMessage.error(res.data.msg);
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};

const updateSwitch = (row: any) => {
  updateBrand(row).then((res) => {
    if (res.data.flag) {
      ElMessage.success("修改成功");
      getList();
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};
const toDelete = (row: any) => {
  console.log("row", row);
  deleteBrandById(row).then((res) => {
    if (res.data.flag) {
      ElMessage.success("删除成功");
      getList();
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};

const toUpdate = (row: any) => {
  Object.assign(updateForm.value, row);
  dialogFormUpdate.value = true;
  console.log("form", updateForm.value);
};

const updateOk = () => {
  updateBrand(updateForm.value).then((res) => {
    if (res.data.flag) {
      ElMessage.success("修改成功");
      dialogFormUpdate.value = false;
      getList();
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};
const toAdd = () => {
  dialogFormSvae.value = true;
};

const saveOk = () => {
  if (saveForm.value.brandName == null || saveForm.value.brandName == "") {
    ElMessage.error("品牌名称不能为空");
    return;
  }
  if (saveForm.value.brandTop == null || saveForm.value.brandTop <= 0) {
    ElMessage.error("品牌排序不能为空");
    return;
  }
  if (saveForm.value.brandStatus == null || saveForm.value.brandStatus < 0) {
    ElMessage.error("品牌状态不能为空");
    return;
  }
  saveBrand(saveForm.value).then((res) => {
    if (res.data.flag) {
      ElMessage.success("添加成功");
      dialogFormSvae.value = false;
      getList();
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};

const getList = () => {
  getBrandList(form.value).then((res) => {
    tableData.value = res.data.data.records;
    total.value = res.data.data.total;
  });
};

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  form.value.pageSize = val;
  getList();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  form.value.pageNum = val;
  getList();
};

// 页面加载钩子函数
onMounted(() => {
  getList();
});
</script>
